<template>
    <div>
        <div class="top">
            <van-search shape="round" v-model="value" placeholder="请输入搜索关键词" />
        </div>
        <div class="content">
            <div class="types">
                <van-sidebar v-model="activeKey">
                    <van-sidebar-item @click="changeType" v-for="type in types" :key="type.id" :title="type.name" />
                </van-sidebar>
            </div>
            <div class="products">
                <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
                >
                    <div class="product" v-for="product in pros" :key="product.id">
                        <img :src="product.banner" alt="">
                        <p class="proname">{{product.name}}</p>
                        <p class="price">价格：￥{{product.price}}元</p>
                        <van-button @click="addcart(product)" round type="warning">加入购物车</van-button>
                    </div>
                </van-list>
            </div>
        </div>
        <myfooter/>
    </div>
</template>

<script>
import Vue from 'vue';
import { Search } from 'vant';
import { Sidebar, SidebarItem } from 'vant';
import {getTypes, getpro, addCart} from '@/request'
import { List } from 'vant';
import { Button } from 'vant';
import {getcookie} from '@/utils/cookie'
import { Toast } from 'vant';
import myfooter from '@/components/myfooter'

Vue.use(Toast);
Vue.use(Button);
Vue.use(List);
Vue.use(Sidebar);
Vue.use(SidebarItem);
Vue.use(Search);
export default {
    components:{
        myfooter:myfooter
    },
    data () {
        return {
            value: '',
            activeKey: 0,
            types: [],
            pros: [],
            loading: false,
            finished: false,
            
            page: 1,
            typename: ''
        }
    },
    created() {
        this.typename = this.$route.query.typename || '全部'
        this.request()
    },
    methods: {
        async request() {
            var types = await getTypes()
           
            types.unshift({
                id: +new Date(),
                name: '全部'
            })
            this.types = types
            this.activeKey = this.types.findIndex(item => item.name === this.typename)
        },
        onLoad() {
            this.getProducts()
        },
        getProducts() {
            getpro(this.typename).then(data => {
                var pros = data.slice((this.page - 1) * 5, this.page * 5)
                if(pros.length < 5) {
                    this.finished = true
                } else {
                    this.page++
                }
                this.loading = false
                this.pros = this.pros.concat(pros)
            })
        },
        
        changeType(index) {
            
            this.typename = this.types[index].name
            this.page = 1
            this.pros = []
            this.finished = false
            this.getProducts()
        },
        
        addcart(product) {
            var _this = this
           
            var username = getcookie('username')
           
            if(!username) {
                Toast.fail({
                    message: '请先登录！',
                    onClose() {
                       
                        window.localStorage.setItem('url', '/types')
                        _this.$router.push('/my/login')
                    }
                });
                return
            }
           
            product.username = username
            product.number = 1
            
            if(product.id) {
                product.pid = product.id
                delete product.id
            }
            addCart(product).then(data => {
                // console.log(data);
                Toast.success(data.msg)
            })
        }
    }
}
</script>

<style scoped>
    .top{
        width: 100%;
        position: fixed;
        left: 0;
        top: 0;
    }
    .types{
        float: left;
        margin-bottom: 50px;
        width: 25%;
        position: fixed;
        left: 0;
        top: 50px;
    }
    .products{
        float: right;
        margin: 0 30px 50px 80px;
        width: 65%;
    }
    .product{
        width: 100%;
        border: 1px solid #ccc;
        border-radius: 10px;
        padding: 10px;
    }
    .product img{
        width: 100%;
        border-radius: 10px;
    }
    .product .price{
        font-size: 20px;
        font-weight: bold;
        color: #f00;
    }
    .product .van-button{
        width: 100%;
        font-size: 18px;
    }
    .product .proname{
        line-height: 28px;
    }
</style>
